<template>
  <div id="main">
    <br>
    <label>搜索关键字:</label>
    <input class="top-input" type = "text" placeholder = "请输入关键字" v-model = "keyword">
    <button type = "button" class="btn btn-sm btn-primary color"  @click="onSearch" v-model="keyword">查找图书</button>
    <button type = "button" class="btn btn-sm btn-primary color" data-toggle="modal" data-target="#addModal" @click="add()">添加借阅</button>
    <hr>
    <table class="table table-striped table-hover">
      <tr>
        <td width="100"> 序号 </td>
        <td width="200">  名字  </td>
        <td width="200">  图书类型  </td>
        <td width="100">  馆内剩余数  </td>
      </tr>
      <tr v-for="(item,index) in list.slice((current-1)*size,current*size)">
        <td width="100"> {{index+1}} </td>
        <td width="200">{{item.name}}</td>

        <td width="200">{{item.bookCategory.category}} </td>

        <td width="100">{{item.quantitiesInLibrary}} </td>

        <td></td>
      </tr>
    </table>

    <div id="myChart" :style="{width: '800px', height: '200px', clear:'both',float:'left'}"></div>

    <Page :total="total" :allPage="allpage" v-on:change="changePage"></Page>


    <div class="modal fade" id="addModal" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title"><center>添加借阅</center></h4>
            <button type="button"
                    class="close"
                    data-dismiss="modal"
                    aria-hidden="true">&times;
            </button>
          </div>

          <div class="modal-body">
            借阅人：<input type="text" v-model="pobj.name"><br>
            借阅书籍：<input type="text" v-model="pobj.borrowingBook"><br>
            借阅时间：<input type="text" v-model="pobj.remainingBorrowingTime"><br>
            借阅备注：<input type="text" v-model="pobj.tips"><br>
          </div>

          <div class="modal-footer">

            <button type="button"
                    class="btn btn-default"
                    data-dismiss="modal">关闭
            </button>

            <button type="button"
                    class="btn btn-primary"
                    @click = "okadd()">提交
            </button>

          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>

    import axios from 'axios';
    import Page from '@/publicComponent/Page';

    export default {
        name: "subscribe",
        components:{
            Page
        },
        data: function () {
            return  {
                url:this.baseURL+'book.ctl',
                purl:this.baseURL+'PersonalBI.ctl',
                list:[],
                pobj:{},
                bookCategory:{},
                location:{},
                keyword:'',

                size:3,
                current:1,
                total:0,
                allpage:0,

                chartsdata:[0,0,0,0,0,0,0,0,0,0],
                chartseries:["语言、文学","经济","政治、法律","艺术","自然科学总论","数理科学和化学","历史、地理","医药、卫生","生物科学","天文学、地球科学"]
            }
        },
        created(){
            this.getList();
            var arr = this;
            axios.get(this.url).then((res) => {
                this.list=res.data;
            })
        },
        methods:{

            getList:function(){
                var _this=this;
                this.axios.get(this.url).then((res) => {
                    this.list=res.data;
                    this.total=this.list.length
                    this.allpage=Math.ceil(this.total/this.size)

                    _this.chartsdata=[0,0,0,0,0,0,0,0,0,0]

                    _this.list.forEach(function(item,i){
                        _this.chartseries.forEach(function(ｏ,i){
                            if(item.bookCategory.category==ｏ){
                                _this.chartsdata[i]++;
                            }
                        })
                    })
                    this.drawLine();
                })
            },

            drawLine (){

                let myChart = this.$echarts.init(document.getElementById('myChart'))

                myChart.setOption({
                    title: {
                        text: '                                                                     图书类型统计' ,
                    },
                    tooltip: {},
                    axisTick: {
                        show: true
                    },
                    xAxis: {
                        data: this.chartseries,
                    },
                    yAxis: {
                        minInterval: 2
                    },
                    series: [{
                        name: '',
                        type: 'bar',
                        itemStyle: {
                            color: 'rgba(100,100,50,50)'
                        },
                        data: this.chartsdata,
                    }]
                });
            },

            add:function(){
            },

            okadd:function(){
                this.axios.post(this.purl,this.pobj)
                    .then((res) => {
                        alert("添加成功");
                        this.pobj={};
                    })
                $("#addModal").modal('hide');
            },

            onSearch(){
                var arr = this;
                axios.get(this.url+"?keyword="+this.keyword).then((response) => {
                    arr.list=response.data;
                })
            },
            changePage:function(index){
                this.current = index;
            }
        }

    }
</script>

<style scoped>
  .color{background-color:#E6E6E6; color: #555555}
  #main{padding:5px;}
  .modal-body{
    text-align: center;
    position: relative;
    line-height: 50px;
    padding-left:50px;
  }
  .modal-body input{
    height:28px;
  }
</style>
